<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<div class="widget-box">
	<div class="widget-header header-color-pink">
		<h5>
			<i class="icon-table"></i>雨量计趋势图
		</h5>
		<div class="widget-toolbar no-border">
			<button id="export" onclick="exportExcel('/export/rain_his');" class="btn btn-xs bigger btn-yellow dropdown-toggle">
				<i class="icon-download-alt"> 导出Excel</i>
			</button>
			<button id="read" onclick="readData('rain', '/history/rain');" class="btn btn-xs bigger btn-yellow dropdown-toggle">
				<i class="icon-book"> 读取今天数据</i>
			</button>
			<button id="print" onclick="Print.print();" class="btn btn-xs bigger btn-yellow dropdown-toggle">
				<i class="icon-print"> 打印</i>
			</button>
		</div>
	</div>
	<div class="widget-body">

		<div class="widget-toolbox padding-2 clearfix">
			<!-- 查询条件 start -->
			<form id="searchForm" class="form-inline" role="form">
				<div class="form-group">
					<div class="col-sm-9" style="width: 150px; padding: 0px;">
						<select name="mtype" id="mtype" class="col-xs-10 col-sm-5" style="width: 150px; height: 34px;">
							<option value="1">趋势图</option>
							<option value="2">柱状图</option>
						</select>
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-9" style="width: 150px; padding: 0px;">
						<select name="condition" id="condition" class="col-xs-10 col-sm-5" style="width: 150px; height: 34px;">
							<option value="1">按天</option>
							<option value="2">按月</option>
						</select>
					</div>
				</div>
				<div id="day-div" class="form-group">
					<input type="text" readonly="readonly" class="date-picker-day" id="slt-date-day" name="sltdateday" value="${today}" data-date-format="yyyy/mm/dd" placeholder="选择日期">
				</div>
				<div id="month-div" style="display: none;" class="form-group">
					<input type="text" readonly="readonly" class="date-picker-month" id="slt-date-month" name="sltdatemonth" data-date-format="yyyy/mm" placeholder="选择日期">
				</div>
				<button type="button" onclick="queryLine();" class="btn btn-default btn-sm">
					查询 <i class="icon-search icon-on-right bigger-110"></i>
				</button>
			</form>
		</div>
		<!-- 查询条件 end -->

		<div id="printdiv" class="widget-main no-padding">
			<div id="chart-div"></div>
		</div>

	</div>
</div>
<script type="text/javascript">

	var hours = ['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00']; // X坐标轴
	var days = [];
	var current = 1; // 默认趋势图

	_addData([],{
		div : 'chart-div',
		title : '降雨量变化趋势图',
		ytitle : '降雨量(mm)',
		type : 'spline',
		min : 0,
		max : 5,
		xx : hours,
		xtitle : '(小时)'
	}, null, true);

	queryLine(); // 进入页面时显示当天数据
	
	function queryLine() {
		var mtype = $('#mtype').val(); // 图形类型：1-趋势图 2-柱状图
		var condition = $('#condition').val(); // 查询1-天或2-月数据
		var time;
		if (condition == 1) {
			time = $('#slt-date-day').val();
		} else {
			time = $('#slt-date-month').val();
		}
		if (time == '') {
			alert('选择时间!');
			return;
		}
		var url = "/history/raindata";
		var param = {
			condition : condition,
			time : time
		};
		ajaxSubmit(url, param, 'POST', function(d) {
			var data = eval('(' + d + ')');
			console.log(data);
			if (condition == 2) {
				for ( var i = 0; i < data.days; i++) { // 计算这个月有多少天
					days[i] = i+1;
				}
			}
			var title = time + ' 降雨量变化'
			if (mtype == 1) {
				title += '趋势图';
			} else {
				title += '柱状图';
			}
			if (condition == 1) {
				title += '(全天降雨量'+(data.val).toFixed(2)+' mm)';
			}
			var options = {
				div : 'chart-div',
				title : title,
				ytitle : '降雨量(mm)',
				type : mtype == 1 ? 'spline' : 'column',
				min : data.min,
				max : data.max+5,
				xx : condition==1?hours:days,
				xtitle : condition==1?'(小时)':'(天)'
			};
			_addData(data.xs, options, null, current!=mtype); // 不是当前图形则重绘
			current = mtype;
		});
	}

	var _chart;

	function _destroyChart() {
		if (_chart) {
			_chart.destroy();
			_chart = null;
		}
	}
	function _addData(data, options, hor, destroy) {
		//if (data.length == 0)
			//return;
		if (destroy)
			_destroyChart();
		if (_chart) {
			//_chart.addSeries(data[0]);
			_chart.xAxis[0].setCategories(options.xx);
			_chart.setTitle({text:options.title},null);
			_chart.yAxis[0].setExtremes(options.min, options.max,true,true);
			_chart.xAxis[0].setTitle({
	            text: '日期/时间'+options.xtitle
	        });
			_chart.series[0].setData(data, true, null, true);
		} else {
			_makeData(data, options);
		}
	}
	function _makeData(data, options) {
		_chart = new Highcharts.Chart({
			//_chart = new Highcharts.StockChart({
			chart : {
				type : (options.type == null ? 'spline' : options.type),
				renderTo : document.getElementById(options.div),
				//zoomType : 'x',
				height : 480
			},
			credits : {
				enabled : false
			},
			title : {
				text : options.title
			},
			rangeSelector : {
				enabled : false
			},
			series : [ {
				data : data
			} ],
			tooltip : {
				xDateFormat : '%Y-%m-%d %H:%M:%S',
				useHTML : true,
				formatter : function() {
					//return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>监测值：' + this.y;
					return '检测值: '+this.y+'<br/>'+this.x;
				}
			},
			xAxis : {
				title : {
					text : '日期/时间'+options.xtitle
				},
				// type : 'datetime',
				gridLineWidth : 1,// 默认是0，即在图上没有纵轴间隔线
				lineColor : '#990000',
				/*tickPixelInterval : 80,
				//tickInterval: 5,隔几个点显示x坐标
				// x轴时间的格式化
				dateTimeLabelFormats : {
					second : '%H时<br/>%M分%S秒',
					minute : '%H时<br/>%M分%S秒',
					hour : '%H时<br/>%M分%S秒',
					day : '%m-%d',
					week : '%m-%d',
					month : '%Y-%m',
					year : '%Y'
				} */
				//categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Feb', 'Mar', 'Apr', 'Feb', 'Mar', 'Apr', 'Feb', 'Mar', 'Apr', 'Feb', 'Mar', 'Apr', 'Feb', 'Mar', 'Apr', 'Feb', 'Mar', 'Apr', 'Feb', 'Mar']
				categories : options.xx
			},

			yAxis : {
				gridLineWidth : 1,
				min: options.min,
				max: options.max,
				title : {
					text : options.ytitle
				},
				tickPixelInterval : 15,
				lineWidth : 2,
				labels : {
					align : 'right',
					x : -3,
					y : 6
				}
			//,
			//plotLines :hor
			},
			legend : {
				enabled : false,
				align : 'center',
				backgroundColor : '#FCFFC5',
				borderColor : 'black',
				borderWidth : 2,
				//layout: 'vertical',
				verticalAlign : 'top',
				y : 30,
				shadow : true
			},
			/* navigator : {
				enabled : true,
				outlineWidth : 0.5
				xAxis : {
					dateTimeLabelFormats : {
						second : '%H:%M:%S',
						minute : '%d<br/>%H:%M',
						hour : '%d<br/>%H:%M',
						day : '%m-%d',
						week : '%m-%d',
						month : '%Y-%m',
						year : '%Y'
					}
				}
			}, */
			plotOptions: {
                spline: {
                    dataLabels: {
                        //format: '{y} mm',
                        enabled: true
                    },
                    enableMouseTracking: false
                },
                column: {
                    dataLabels: {
                        //format: '{y} mm',
                        enabled: true
                    },
                    enableMouseTracking: false
                }
            },
			exporting : {
				enabled : false
			}
		});
	}
</script>

<script type="text/javascript">
$('#condition').change(function(){
	if($(this).val() == 2) {
		$('#month-div').css('display', '');
		$('#day-div').css('display', 'none');
	} else {
		$('#day-div').css('display', '');
		$('#month-div').css('display', 'none');
	}
});

$('.date-picker-month').datepicker({format: 'yyyy/mm',viewMode:2,minViewMode:1,autoclose: true}).next().on(ace.click_event, function(){
	$(this).prev().focus();
});

$('.date-picker-day').datepicker({format: 'yyyy/mm/dd',autoclose: true}).next().on(ace.click_event, function(){
	$(this).prev().focus();
});

function exportExcel(urlStr){
	var condition = $('#condition').val(); // 查询1-天或2-月数据
	var time;
	if (condition == 1) {
		time = $('#slt-date-day').val();
	} else {
		time = $('#slt-date-month').val();
	}
	if (time == '') {
		alert('选择时间!');
		return;
	}
	var timeStr = time.replace(/\//g,'-');
	
	var url = "/tail/" + urlStr+'/'+condition+'/'+timeStr;
	window.open(url);
}
</script>